(
    function () {
        const navside = document.querySelector('.nav-side');
        const sidebar = document.querySelector('.sidebar');
        const navhandle = document.querySelector('.nav-handle');

        navside && navside.addEventListener('click', navFn);
        let flag = true;
        function navFn() {
            if (flag) {
                navside.classList.add('active');
                sidebar.style.width = 0 + 'px';
                navhandle.style.width = 0 + 'px';
                flag = false;
            } else {
                navside.classList.remove('active');
                sidebar.style.width = 235 + 'px';
                navhandle.style.width = 235 + 'px';
                flag = true;
            }
        };

        const inputSearch = document.querySelector('input#search-input');
        const searchbox = document.querySelector('.search-box');
        inputSearch.addEventListener('focus', function () {
            inputSearch.parentElement.parentElement.style.width = '50%';
            inputSearch.parentElement.children[0].children[1].style.display = 'none';
            searchbox.style.display = 'block';
            inputSearch.style.backgroundColor = '#969696';
        });
        // 输入框
        inputSearch.addEventListener('blur', function () {
            inputSearch.parentElement.children[0].children[1].style.display = 'block';
            inputSearch.parentElement.parentElement.style.width = 320 + 'px';
            searchbox.style.display = 'none';
            inputSearch.style.backgroundColor = '#575757';
        });
        // 通知
        const scrollWrapper = document.querySelector('.scroll-wrapper');
        scrollWrapper.addEventListener('mouseenter', function () {
            scrollWrapper.children[1].style.display = 'block';
        })
        scrollWrapper.addEventListener('mouseleave', function () {
            scrollWrapper.children[1].style.display = 'none';
        })

    }
)();